<template>
  <div v-loading="loading">
    <div v-if="addons.length > 0" class="addon-list">
      <ul class="flex flex-wrap">
        <li
          v-for="(item, key) in addons"
          :key="key"
          :class="!item.available || !item.cloud_available ? 'no_auth' : ''"
          class="float-left m-10px border border-solid border-color-#ebeef5 cursor-pointer rounded-10px overflow-hidden transition-all duration-300 hover:shadow-md"
          @click="onClickAddAddon(item)"
        >
          <el-popover placement="top-start" title="介绍" width="300" trigger="hover" :open-delay="600" :content="item.description">
            <template #reference>
              <el-image :src="item.icon" alt="" class="w-132px h-132px" fit="cover">
                <template #error>
                  <img src="@/assets/default/addon.png" alt="" style="width: 132px" />
                </template>
              </el-image>
            </template>
          </el-popover>
          <p class="text-center py-5px">{{ item.title }}</p>
        </li>
      </ul>
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        hide-on-single-page
        @current-change="getList"
      />
    </div>
    <el-empty v-else />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getUserAddonList } from '@/api/addonAuth'
import { addPlatformAddon } from '@/api/platform_addon'
import { getPlaid } from '@/utils/auth'
import { useUserStore } from '@/stores/index.js'

defineOptions({
  name: 'AddPlatformAddonList'
})

const props = defineProps({
  value: {
    default: '',
    type: String
  }
})

const emit = defineEmits(['success'])

const total = ref(0)
const page = ref(1)
const pageSize = ref(10)
const addons = ref([])
const loading = ref(true)
const plaid = getPlaid()

const userStore = useUserStore()
const userinfo = computed(() => userStore.user)

const getList = (currentPage) => {
  loading.value = true
  page.value = currentPage || page.value
  getUserAddonList(page.value, pageSize.value, plaid, userinfo.value.uid, 1).then((res) => {
    addons.value = res.data
    total.value = res.msg
    loading.value = false
  })
}

const onClickAddAddon = (item) => {
  if (!item.cloud_available) {
    ElMessage.error('当前应用授权次数不足，请联系管理员')
    return
  }
  if (!item.available) {
    ElMessage.error('当前应用无权限，请联系管理员')
    return
  }

  ElMessageBox.confirm('是否确定要添加此应用', '提示')
    .then(() => {
      // 执行添加
      addPlatformAddon(item.id, item.name, plaid)
        .then((res) => {
          ElMessage.success(res.msg)
          getList()
          emit('success')
        })
        .catch((err) => {
          console.log('err', err)
        })
    })
    .catch(() => {})
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.no_auth img {
  cursor: not-allowed;
  opacity: 0.4;
}
</style>
